<template>
    <div class="editor-container">
    <el-form  size="small" :model="formData" label-width="100px">
        <el-form-item label="节点名称">
            <el-input style="width: 200px" v-model="formData.properties.title"></el-input>
        </el-form-item>
        <el-form-item label="节点名称">
            <el-radio v-model="formData.properties.dealType" :label="0">或签(or)</el-radio>
            <el-radio v-model="formData.properties.dealType" :label="1">会签(and)</el-radio>
        </el-form-item>
        <el-form-item label="指派类型" >
            <el-select v-model="formData.properties.type" placeholder="请选择" @change="changeType">
                <el-option label="用户" value="user" />
                <el-option label="角色" value="role" />
                <el-option label="岗位" value="post" />
                <el-option label="上级" value="manager" />
                <el-option label="字段" value="field" />
            </el-select>
        </el-form-item>
        <el-form-item label="选择用户" v-if="formData.properties.type==='user'">
            <el-select v-model="formData.properties.target" multiple filterable  placeholder="请选择">
                <el-option
                    v-for="item in  targetSource.user"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="选择角色" v-if="formData.properties.type==='role'">
            <el-select v-model="formData.properties.target" multiple placeholder="请选择">
                <el-option
                    v-for="item in  targetSource.role"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="选择岗位" v-if="formData.properties.type==='post'">
            <el-select v-model="formData.properties.target" multiple placeholder="请选择">
                <el-option label="受理人" value="A" />
                <el-option label="候选人" value="B" />
                <el-option label="候选组" value="C" />
            </el-select>
        </el-form-item>
        <el-form-item label="选择上级" v-if="formData.properties.type==='manager'">
        <el-select v-model="formData.properties.target" placeholder="请选择">
            <el-option
                v-for="item in  targetSource.manager"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select> 节点提交人的上级
    </el-form-item>
        <el-form-item label="选择字段" v-if="formData.properties.type==='field'">
            <el-select v-model="formData.properties.target" placeholder="请选择">
                <el-option-group
                    v-for="group in targetSource.field"
                    :key="group.tableID" :disabled="group.tableType===1"
                    :label="group.tableDispName">
                    <el-option
                        v-for="item in group.Fields" v-if="group&&group.tableType===1"
                        :key="item.fieldID"
                        :label="item.fieldDispName"
                        :value="group.tableName+'.'+item.fieldName">
                    </el-option>
                    <el-option
                        v-for="item in group.Fields" v-if="group&&group.tableType===0"
                        :key="item.fieldID"
                        :label="item.fieldDispName"
                        :value="item.fieldName"></el-option>
                </el-option-group>
            </el-select>
        </el-form-item>
        <el-form-item label="部门限制" v-if="['role','post'].includes(formData.properties.type)">
            <el-select v-model="formData.properties.dept" multiple placeholder="请选择">
                <el-option label="同部门" value="1" />
                <el-option label="上级部门" value="2" />
                <el-option label="下级部门" value="3" />
            </el-select>
        </el-form-item>
        <el-form-item label="可编辑字段" >
            <el-select v-model="formData.properties.write"  multiple filterable placeholder="请选择">
                <el-option-group
                    v-for="group in targetSource.field"
                    :key="group.tableID"
                    :label="group.tableDispName">
                    <el-option
                        v-for="item in group.Fields" v-if="group&&group.tableType===1"
                        :key="item.fieldID"
                        :label="item.fieldDispName"
                        :value="group.tableName+'.'+item.fieldName">
                    </el-option>
                    <el-option
                        v-for="item in group.Fields" v-if="group&&group.tableType===0"
                        :key="item.fieldID"
                        :label="item.fieldDispName"
                        :value="item.fieldName"></el-option>
                </el-option-group>
            </el-select>
        </el-form-item>
        <el-form-item label="不可见字段" >
            <el-select v-model="formData.properties.invisible" multiple filterable placeholder="请选择">
                <el-option-group
                    v-for="group in targetSource.field"
                    :key="group.tableID"
                    :label="group.tableDispName">
                    <el-option
                        v-for="item in group.Fields" v-if="group&&group.tableType===1"
                        :key="item.fieldID"
                        :label="item.fieldDispName"
                        :value="group.tableName+'.'+item.fieldName">
                    </el-option>
                    <el-option
                        v-for="item in group.Fields" v-if="group&&group.tableType===0"
                        :key="item.fieldID"
                        :label="item.fieldDispName"
                        :value="item.fieldName"></el-option>
                </el-option-group>
            </el-select>
        </el-form-item>

        <el-form-item label="提醒" >
            <el-select v-model="formData.properties.remind" placeholder="请选择">
                <el-option label="不提醒" :value="0" />
                <el-option label="按天算" :value="1" />
                <el-option label="按小时算" :value="2" />
                <el-option label="按分钟算" :value="3" />
            </el-select>
        </el-form-item>
        <el-form-item label="催办" v-if="formData.properties.remind>0">
            <el-input-number v-model="formData.properties.urge" :min="0" :max="10" label=""></el-input-number>多少时间后催办
        </el-form-item>
        <el-form-item label="自动处理" v-if="formData.properties.remind>0">
            <el-input-number v-model="formData.properties.auto" :min="0" :max="10" label=""></el-input-number>多少时间后自动同意后流转
        </el-form-item>
        <el-form-item label="提醒方式" v-if="formData.properties.remind>0">
            <el-select v-model="formData.properties.message" multiple placeholder="请选择">
                <el-option label="系统消息" value="system" />
                <el-option label="邮件" value="email" />
                <el-option label="企业微信" value="wxwork" />
                <el-option label="钉钉" value="dingtalk" />
            </el-select>
        </el-form-item>

        <el-form-item label="是否可退回上一步" label-width="150px" >
            <el-switch v-model="formData.properties.backone" active-text="可以" inactive-text="不可以"></el-switch>
        </el-form-item>
        <el-form-item label="是否可退回发起人" label-width="150px" >
            <el-switch v-model="formData.properties.backhome" active-text="可以" inactive-text="不可以"></el-switch>
        </el-form-item>
        <el-form-item label="是否可撤销" label-width="150px" >
            <el-switch v-model="formData.properties.revoke" active-text="可以" inactive-text="不可以"></el-switch>
        </el-form-item>
    </el-form>

    </div>
</template>

<script >

import {defineComponent, onMounted, reactive, ref, toRefs, watch} from 'vue';
import XEUtils, {assign} from "xe-utils";

export default defineComponent({
    name: 'userTask',
    props: {
        info: Object,
        modelValue: Object,
        targetSource: Object,
    },
    setup(props, { emit }) {
        let Organization = ref()
        const state = reactive({
            formData: {properties:{type:'',target:'',dept:null,write:null,invisible:null,urge:0,remind:0,auto:0,dealType:0}},
            target: { user:[],role:[],post:[],manager:[],field:[] }
        });
        onMounted(async ()=>{
            state.formData=assign(state.formData,props.modelValue)
            state.target=XEUtils.assign({},props.targetSource||{})
            state.target.field=assign({},props.info['tables'])
        })
        watch(
            () => props.modelValue,
            (newValue, oldValue) => {
                state.formData=assign(state.formData,props.modelValue)
            }
        )
        watch(
            () => props.targetSource,
            (newValue, oldValue) => {
                state.target=XEUtils.assign({},props.targetSource||{})
            }
        )

        watch(
            () =>  state.formData.properties,
            (newValue, oldValue) => {
                emit('update:modelValue', state.formData);
            }
        );
        const changeType=(data)=>{
            console.log("changeType",data)
        }

        return {changeType,
            ...toRefs(state),
        };
    },
});
</script>

<style scoped>

</style>